<template>
  <view style="text-align: center; padding-top: 20px;">
    <!-- 给图片添加点击事件，调用updateImage方法 -->
    <image :src="iconFilePath" mode="aspectFill" @click="updateImage" style="width: 150px; height: 150px; border-radius: 50%; margin-bottom: 30px;"></image>
    <button style="width: 200px; margin-bottom: 15px;" @click="updateImage">选择图片显示</button>
    <button style="width: 200px; margin-bottom: 15px;" @click="previewImage">预览图片</button>
    <button style="width: 200px;" @click="getImageInfo">获取图片信息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      iconFilePath: "/static/头像.png" // 替换为你的默认图片路径
    }
  },
  methods: {
    updateImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          this.iconFilePath = res.tempFilePaths[0];
        }
      });
    },
    previewImage() {
      if (this.iconFilePath === "/static/logo.png") {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }
      uni.previewImage({
        urls: [this.iconFilePath],
        current: this.iconFilePath
      });
    },
    getImageInfo() {
      if (this.iconFilePath === "/static/logo.png") {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }
      uni.getImageInfo({
        src: this.iconFilePath,
        success: (info) => {
          uni.showModal({
            title: '图片信息',
            content: `宽度：${info.width}px\n高度：${info.height}px\n格式：${info.type}`
          });
        }
      });
    }
  }
}
</script>

<style scoped>
</style>